<template>
  <div class="main">
    <header>
      <div class="userInfo">
        <div class="userInfo_top">
          <div class="avatar">
            <img v-if="username" :src="userInfo.avatar || headerImg" />
            <img v-else src="~@/assets/images/avatar.png" />
          </div>
          <div class="extra">
            <p class="name">
              <span v-if="username">{{userInfo.nickname}}</span>
              <span v-else @click="toRegister">登录/注册</span>
            </p>
            <p class="edit" v-if="username" @click="$router.push('/mineInfo')">编辑</p>
          </div>
          <div class="ask" v-if="username" @click="toOneToOne">去约课</div>
        </div>
        <div class="userInfo_bottom">
          <div v-for="(item, index) in mineList" :key="index" :class="{'bottom2':index==1}" @click="$router.push(item.style)">
            <p class="p1">{{item.count}}</p>
            <p class="p2">{{item.name}}</p>
            <p class="p3">{{item.note}}</p>
          </div>
        </div>
      </div>
    </header>
    <div class="to-share">
      <div class="box" @click="showPopup=true">
        <img src="~@/assets/images/icon_person_share.png" />
        <div>
          <p class="big">邀请好友注册APP，享多重好礼</p>
          <p class="sub">限时特惠，多邀多得</p>
        </div>
      </div>
    </div>
    <van-popup v-model="showPopup">
      <div class="share-box">
        <img class="share-img" src="~@/assets/images/feiji.png" />
        <div class="finger">
          <img src="~@/assets/images/icon_home_finger.png" />
          <p>长按保存到相册</p>
        </div>
      </div>
    </van-popup>
    <div class="container">
        <div v-for="(item, index) in contentList" :key="index">
            <Title>{{item.title}}</Title>
            <div class="content" >
                <div v-for="(val, i) in item.list" :key="i">
                    <img :src="val.img" alt="">
                    <p>{{val.name}}</p>
                </div>
            </div>
        </div>

    </div>
  </div>
</template>

<script>
import { getUserInfo ,getUCenterInfo} from "../untils/netWork";
import Title from '../components/common/Title';
import axios from "axios";
export default {
  data: () => ({
    userInfo: {},
    headerImg: require("@/assets/images/user_Headportrait.png"),
    username: "",
    showPopup: false,
    mineList: [
      {
        count: 0,
        name: "我的特色课",
        note: "已购特色课程的学习",
        style: "myStudy",
        url: "MyStudy"
      },
      {
        count: 0,
        name: "一对一辅导",
        note: "我的一对一老师辅导",
        style: "myPlan",
        url: "Record"
      },
      {
        count: 0,
        name: "剩余学习币",
        note: "查看剩余学习币",
        style: "myPeriod",
        url: "MyCurrency"
      }
    ],
    contentList:[
        {
            title:"课程相关",
            list:[
                { name:"关注的老师", img:require("../assets/theme-img/icon_person_teacher.png"), query:"/concern" },
                { name:"我的收藏", img:require("..//assets/theme-img/icon_person_collect.png"), query:"/collect" }
            ]
        },
        {
            title:"订单相关",
            list:[
                { name:"课程订单", img:require("@/assets/theme-img/icon_person_order.png"), query:"/order?order_type=2" },
                { name:"会员订单", img:require("@/assets/theme-img/icon_person_order.png"), query:"/order?order_type=3" },
                { name:"约课订单", img:require("@/assets/theme-img/icon_person_order.png"), query:"/order?order_type=4" },
            ]
        },
        {
            title:"我的账户",
            list:[
                { name:"优惠券", img:require("@/assets/theme-img/icon_person_coupon.png"), query:"/coupon" },
                { name:"学习卡", img:require("@/assets/theme-img/icon_person_card.png"), query:"/card" },
                { name:"会员", img:require("@/assets/theme-img/icon_person_vip.png"), query:"/vip" },
            ]
        },
        {
            title:"自助服务",
            list:[
                { name:"我的消息", img:require("@/assets/theme-img/icon_person_news.png"), query:"/message" },
                { name:"意见反馈", img:require("@/assets/theme-img/icon_person_mail.png"), query:"/feedback" },
                { name:"在线客服", img:require("@/assets/theme-img/icon_person_custom.png"), query:"/messageToUs" },
                { name:"设置", img:require("../assets/theme-img/icon_person_setting.png"), query:"/options" },
            ]
        },
    ]
  }),
  created() {
    this.username = window.localStorage.username;
    if (this.username) {
      getUserInfo().then(res => {
        
        // console.log(res);
        if (res.code == 200) {
          this.userInfo = res.data;
        }
      });
      getUCenterInfo().then(res=>{
        console.log(res.data)
        this.mineList[0].count=res.data.courses
        this.mineList[1].count=res.data.oto
        this.mineList[2].count=res.data.integral+".00"
      })
    }
  },
  components:{
      Title
  },
  methods: {
    toRegister() {
      this.$router.push("/register");
    },
    toOneToOne() {
      this.$router.push("/oneToOne");
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  margin-bottom: 50px;
  header {
    width: inherit;
    height: 230px;
    background: url("~@/assets/theme-img/user_bg.png") no-repeat top center;
    background-size: 100%;
    box-sizing: border-box;
    padding-top: 50px;
    .userInfo {
      width: 90%;
      height: 180px;
      margin: 0 auto;
      background: white;
      border-radius: 10px;
      .userInfo_bottom {
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          margin-bottom: 10px;
          text-align: center;
        }
        .p1 {
          font-size: 16px;
          color: orange;
        }
        .p2 {
          font-size: 15px;
        }
        .p3 {
          font-size: 12px;
          color: rgb(130, 130, 130);
        }
        .bottom2 {
          border-left: 1px solid rgb(245, 245, 245);
          border-right: 1px solid rgb(245, 245, 245);
          margin: 0 10px;
          padding: 0 6px;
        }
      }
      .userInfo_top {
        height: 90px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 50px;
          margin: 20px;
        }
        .extra {
          width: 200px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .edit {
            margin-left: 10px;
          }
        }
        .ask {
          width: 50px;
          line-height: 20px;
          text-align: center;
          background: orange;
          border-radius: 10px 0 0 10px;
          color: white;
        }
      }
    }
  }
}
.to-share {
  width: 100%;
  padding: 10px 10px 0;
  background-color: #fff;
  box-sizing: border-box;
  .box {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 40px;
    background: linear-gradient(
      -90deg,
      rgba(242, 153, 90, 1),
      rgba(235, 97, 0, 1)
    );
    border-radius: 44px;
    img {
      display: block;
      width: 20px;
      height: 20px;
      margin: 0 15px 0;
    }
    .big {
      font-size: 13px;
      color: #fff;
      // line-height: 24px;
    }
    .sub {
      // margin-top: 10px;
      font-size: 10px;
      color: #fff;
      // line-height: 20px;
    }
    &:after {
      content: "";
      display: block;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%) rotate(45deg);
    }
  }
}
.share-box {
  width: 90%;
  margin: 0 auto;
  .share-img {
    display: block;
    width: 330px;
    height: 400px;
  }
  .finger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: rgba(130, 130, 130, 0.6);
    img {
      width: 21px;
      height: 22px;
      margin-right: 10px;
    }
    p {
      font-family: PingFangSC-Medium;
      font-size: 15px;
      color: #fff;
    }
  }
}
.container{
    width: 90%;
    margin: 0 auto;
    background: white;
    .content{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid rgb(245, 245, 245);
        div{
            width:60px;
            height: 60px;
            text-align: center;
            // background: darkcyan;
            margin: 0 10px;
            img{
                width:20px;
                margin: 10px;
            }
            p{
                width: 100%;
            }
        }
    }
}
</style>